<template>
  <view class="filter-item">
    <text class="font-item-text">工作地区</text>
    <picker mode="region" @change="onRegionChange">
      <view class="uni-input">
        <template>
          <text class="range-text">{{ formattedWorkArea }}</text>
        </template>
        <uni-icons type="arrowright" size="20" class="icon"></uni-icons>
      </view>
    </picker>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits } from 'vue'

const props = defineProps<{
  workArea: string[]
}>()

const emit = defineEmits<{
  (e: 'update:workArea', value: string[]): void
}>()

const formattedWorkArea = computed(() => {
  return props.workArea.join(' - ')
})

const onRegionChange = (event: any) => {
  const selectedRegion = event.detail.value
  emit('update:workArea', selectedRegion)
}
</script>

<style scoped>
.filter-item {
  font-size: 26rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  cursor: pointer;
  margin-bottom: 40rpx;
  width: 100%;
}

.font-item-text {
  color: #6e7073;
  font-size: 3vw;
}

.uni-input {
  display: flex;
  align-items: center;
}

.icon {
  color: #ccc;
  margin-left: 1vw;
}

.popup-content {
  padding: 40rpx;
  background-color: #fff;
  width: 84.5vw;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
  margin-top: 20rpx;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  /* 按钮之间的间距 */
}

.checkbox-label,
.custom-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.3333% - 8rpx);
  /* 每行三个按钮，并考虑间距 */
  padding: 0rpx;
  height: 80rpx;
  border-radius: 8rpx;
  box-sizing: border-box;
  font-size: 26rpx;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  margin: 4rpx 0;
  /* 上下间距为4rpx，总间距为8rpx */
}

.checkbox-label {
  /* border: 2rpx solid #ff0000; */
  background-color: #f5f5f5;
  color: #666;
}

.custom-button {
  border: 2rpx solid #00a0e9;
  color: #00a0e9;
  /* 文字颜色 */
  background-color: #e5f7f9;
  /* 背景颜色 */
}

.custom-button.selected::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35rpx 35rpx 22rpx 20rpx;
  border-color: transparent rgb(1, 170, 190) rgb(1, 170, 190) transparent;
}

.custom-button.selected .checkmark::before {
  content: '';
  color: white;
  font-size: 32rpx;
  position: absolute;
  top: 50%;
  left: 63%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.custom-button .checkmark {
  position: absolute;
  bottom: 4rpx;
  right: 4rpx;
  width: 28rpx;
  height: 28rpx;
  border-radius: 4rpx;
  text-align: center;
  /* line-height: 28rpx; */
}
</style>
